<template>
  <div class="home_container">
    <div class="sub_pancel">
      <span>常见标识连一连</span>
    </div>
    <div class="start_btn" @click="startExamination"></div>
    <div class="home_cover"></div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
/**
 * 开始考试
 */
const startExamination = () => {
  router.replace({
    path: "/First",
  });
};
</script>
<style lang="less" scoped>
.home_container {
  position: relative;
}

.sub_pancel {
  position: absolute;
  top: 238px;
  left: 200px;
  width: 972px;
  height: 396px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 100px;
  border-radius: 90px;
  background: #ffffff;
  box-shadow: 0px 11.25px 0px 0px #dbb857;

  > span {
    font-size: 102px;
    font-weight: normal;
    line-height: 135%;
    text-align: center;
    letter-spacing: normal;
    color: #000000;
    -webkit-text-stroke: #000000 3px;
  }
}

.start_btn {
  position: absolute;
  top: 761px;
  left: 505px;
  width: 365px;
  height: 118px;
  background-image: url(@/assets/icon/start_btn.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.home_cover {
  position: absolute;
  right: 160px;
  top: 122px;
  width: 580px;
  height: 958px;
  background-image: url(@/assets/cover/home.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
